{{extends file='layout.tpl'}}
{{block name=title}}登陆{{/block}}
{{block name=head}}
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
*{
	margin: 0;
	padding: 0;
	font-family: "微软雅黑", "黑体", "宋体";
}
.intro{
	width: 300px;
	margin: 0 auto;
	margin-top: 52px;
}

.intro h3{
	color: #0073C5;
	border-left: 5px solid #0073c5;
	padding-left: 5px;
}
.intro h1{
	font-weight: normal;
	font-size: 1.8em;
	margin-bottom: 30px;
	line-height: 40px;
	vertical-align: bottom;
}
.warn{
	margin-bottom: 4px;
	padding-left: 4px;
	color: #f00;
	height: 20px;
}

.loginform .input{
	display: block;
	width: 278px;
	margin-bottom: 25px;
	font-size: 1.2em;
	padding: 8px 10px;
	vertical-align: middle;
	border: 1px solid #cdcdcd;
	border-radius: 5px;
}
.verify{
	height: 40px;
	margin-bottom: 8px;
}
.verify input{
	float: left;
	width: 140px;
	font-size: 1.2em;
	padding: 8px 10px;
	vertical-align: middle;
	border: 1px solid #cdcdcd;
	border-radius: 5px;
}
.verify img{
	float: right;
	width: 130px;
	height: 40px;
	border: 1px solid #cdcdcd;
	border-radius: 5px;
	cursor: pointer;
}
.submit{
	display: block;
	width: 100%;
	height: 40px;
	border: none;
	background-color: #0073C5;
	color: #fff;
	font-size: 1.2em;
	border-radius: 5px;
	cursor: pointer;
}

.option{
	margin-bottom: 20px;
	padding-left: 10px;
}
.option input{
	vertical-align: middle;
}
.option span{
	padding-left: 10px;
	vertical-align: middle;
	font-size: 1em;
	color: #a0a0a0;
}
input.submit:hover{
	background-color: #336699;
}
input.disable{
	background-color: #ccc;
}
input.disable:hover{
	background-color: #aaa;
}
</style>
{{/block}}
{{block name=js}}
<script type="text/javascript">
$(function(){
	$('#validate').bind('click', function(event) {
		$('#validate').attr('src', '{{U('login/index/validate')}}?diff='+Math.random());
	});
	$("#loginform").on('submit', function(event) {
		$('#submit_btn').attr('disabled', true);
		$('#submit_btn').addClass('disable');
		$.ajax({
			url: '{{U('login/index/login')}}',
			type: 'POST',
			dataType: 'json',
			data: {
				'username': $('#username').val(),
				'password': $('#password').val(),
				'code': $('#code').val(),
				'check': $('#checkbox').attr('checked')? true : false
			},
			success: function(data){
				if(data.state < 0){
					//登陆失败
					$('#submit_btn').attr('disabled', false);
					$('#validate').attr('src', '{{U('login/index/validate')}}?diff='+Math.random());
					$('#submit_btn').removeClass('disable');
				}else{
					setTimeout(function(){
						location.href = '{{U('index')}}';
					}, 1000);
				}
				$('#warn').html(data.info);
			},
			error: function(e){
				$('#submit_btn').attr('disabled', false);
				$('#validate').attr('src', '{{U('login/index/validate')}}?diff='+Math.random());
				$('#submit_btn').removeClass('disable');
				$('#warn').html('请检查你的网络');
			}
		});
		
		return false;
	});
});
</script>
{{/block}}
{{block name=main}}
<div class="intro">
	<h3>启明星工作室</h3>
	<h1>统一登陆平台</h1>
	<p class="warn" id="warn">{{$inject}}</p>
	<form action="{{U('login/index/login')}}" method="post" class="loginform" id="loginform">
		<input class="input" type="text" name="username" id="username" placeholder="用户名">
		<input class="input" type="password" name="password" id="password" placeholder="密码">
		<div class="verify">
			<input type="text" name="code" id="code" placeholder="验证码">
			<img src="{{U('login/index/validate')}}" alt="validate" id="validate">
		</div>
		<div class="option"><input type="checkbox" name="check" id="checkbox"><label for="checkbox">&nbsp;自动登陆</label></div>
		<input type="submit" value="登陆" class="submit" id="submit_btn">
	</form>
</div>
{{/block}}